<template>
  <div class="oerlist" style="background: white">
    <!--业主评价模块 -->
    <div ref="bigox" style="width: 100%; margin: 1rem 0; background: white">
      <div class="Keine" v-if="oerlist.length == 0">暂无评价!</div>
      <div class="evaluate" v-for="(vlu, index) in oerlist" :key="index">
        <!-- 用户信息 -->
        <div class="evaluateone" style="margin-top: 10px">
          <div class="nextevaluateone">
            <div style="margin-left: 0.6rem; line-height: 35px">
              <img
                :src="vlu.userIcon"
                alt=""
                style="height: 2rem; width: 2rem; border-radius: 50%"
              />
            </div>
            <div style="">
              <p
                style="
                  width: 50px;
                  line-height: 32px;
                  font-size: 15px;
                  margin-left: 11px;
                "
              >
                {{ vlu.username }}
              </p>
              <!-- <p>
                <van-icon name="star" color="#FC4614" /><van-icon
                  name="star"
                  color="#FC4614"
                /><van-icon name="star" color="#FC4614" /><van-icon
                  name="star"
                  color="#FC4614"
                />
              </p>
              <p style="width: 130%">
                <span class="bettery" style="font-size: 0.6rem; color: #5d5c61">
                  设计：<span>{{ vlu.designScore }}</span> &nbsp;施工：<span>{{
                    vlu.workScore
                  }}</span
                  >&nbsp;服务:
                  <span>{{ vlu.serviceScore }}</span>
                </span>
              </p> -->
            </div>
            <div
              style="
                line-height: 36px;
                color: #5d5c61;
                font-szie: 12px;
                width: 63%;
                text-align: right;
              "
            >
              <p>
                {{ String(vlu.createTime).substring(0, 4) }}年{{
                  String(vlu.createTime).substring(5, 7)
                }}月{{ String(vlu.createTime).substring(8, 10) }}日
              </p>
            </div>
          </div>
        </div>
        <!-- 评价内容 -->
        <div class="evaluatetwo" style="">
          <div style="height: auto; margin-left: 29px; font-size: 15px">
            {{ vlu.content }}
          </div>
          <div style="margin-left: 29px">
            <img
              @click="open(item)"
              :src="item"
              alt=""
              style=""
              v-for="(item, index) in oerlist[index].pictures.slice(0, 3)"
              :key="index"
            />
          </div>
          <!-- <div style="height: auto; color: #5d5c61; padding: 0 1rem">
            总体阶段
          </div> -->
        </div>
        <!-- 小dmo分割线 -->
        <van-divider
          :style="{
            margin: '0',
            color: 'rgba(187, 187, 187, 0.38)',
            borderColor: 'rgba(187, 187, 187, 0.38)',
          }"
        ></van-divider>
      </div>
    </div>

    <!-- 图片预览 -->

    <div
      v-show="luay"
      style="
        display: flex;
        top: 0;
        width: 100%;
        height: 100%;
        background: rgba(0, 0, 0, 0.8);
        position: fixed;
        z-index: 11111;
        align-items: center;
      "
      @click="colse"
    >
      <img src="" alt="" style="width: 100%; height: auto" ref="opim" />
    </div>
  </div>
</template>

<script>
import { orelis } from '@/api/api';
import { Divider } from 'vant';
export default {
  name: 'oerlist',

  data() {
    return { oerlist: '', luay: false };
  },

  created() {
    this.initViews();
  },

  watch: {},
  methods: {
    // 预览开启
    open(item) {
      let opim = this.$refs.opim;
      opim.src = item;
      this.luay = true;
    },
    // 预览关闭
    colse() {
      this.luay = false;
    },
    // 保护
    initViews() {
      orelis({
        limit: 10,
        page: 1,
        shopId: Number(this.$route.params.id),
      }).then((res) => {
        this.oerlist = res.data.data.list;
        console.log(res);
      });
      // 用户评级
      //   oer([Number(this.$route.params.id)]).then((res) => {
      //     this.oerlist = res.data.data.list;

      //     for (let index in res.data.data.list) {
      //       this.lenpan = res.data.data.list[index].pictures.length;
      //     }
      //   });

      // 保护
    },
  },

  components: { [Divider.name]: Divider },
};
</script>

<style lang="scss" scoped>
// 用户评价
.evaluate {
  .evaluateone {
    .nextevaluateone {
      // padding: 0.5rem 0;
      display: flex;
      flex-flow: row nowrap;
      width: 100%;
      p {
        margin: 0;
      }
    }
  }
  .evaluatetwo {
    height: auto;
    width: 88%;
    padding-bottom: 0.6rem;
    // border-bottom: 1px solid rgba(0, 0, 0, 0.2);
    margin: auto;
    div:nth-child(1) {
      display: -webkit-box;
      overflow: hidden;
      -webkit-box-orient: vertical;
      // -webkit-line-clamp: (2);
    }
    div:nth-child(2) {
      display: flex;
      height: auto;
      padding: 0.5rem 0;
      // justify-content: space-between;
      flex-direction: row;
      flex-wrap: wrap;
      // align-items: center;
      img {
        margin-left: 10px;
        height: 5.2rem;
        width: 5.2rem;
        border-radius: 10px;
      }
      // img:nth-child(2),
      // img:nth-child(3) {
      //   margin-left: 0.2rem;
      // }
    }
  }
}

// 无评价
.Keine {
  width: 100%;
  height: 2rem;
  text-align: center;
  color: rgb(153, 152, 152);
}
</style>
